<script lang="ts" setup>
import { ref , onMounted ,} from 'vue'
import { useRoute } from 'vue-router';
import tool from '@/utils/tool'
import officeRequestService from '@/api/organization/officeRequestService';
import officeRecordService from '@/api/organization/officeRecordService';
import { ElMessage } from 'element-plus'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile ,UploadUserFile } from 'element-plus'
const currentUser=tool.data.get("USER_INFO");
const route=useRoute()
//稿件数据
const Data=ref({
    id: "",
    userId: "",
    userName:"",
    approverId: "",
    approverName: "",
    name: "",
    classify: "",
    title: "",
    content: "",
    attachment: "",
})
//发送文件数据
const fileData=ref({
    id:"",
    name:"",
    status:"未处理",
})
//批阅者列表
var approvalList =ref([
])
//当前稿件id
let fileId
//当前附件
let file
onMounted(()=>{
    fileId=route.params.id
    getFile()
    selectRoleList()
})
//获取当前到稿件的信息
const getFile=()=>{
    officeRequestService.queryById(fileId).then((data)=>{
        Data.value=data
        fileList.value.push({
        name: Data.value.name,
        url: Data.value.attachment,
    })
    })
}
const text=()=>{
    console.log(Data)
}
//保存稿件
const add= (val)=>{
    if(Data.value.approverId==undefined||Data.value.content==''||Data.value.title=='' ||Data.value.name ==''){
        ElMessage({
            message: '请完善信息',
            type: 'warning',
        })
    }
    else {
        Data.value.userId=currentUser.id
        Data.value.userName=currentUser.name
        //根据选择器的id为姓名赋值
        for(let i=0;i<approvalList.length;i++){
            if(approvalList[i].id == Data.value.approverId){
                Data.value.approverName=approvalList[i].name
                break;
            }
        }
        Data.value.classify=val
        let formData=new FormData()
        submitUpload()
        formData.append('userId',currentUser.id)
        formData.append('name',Data.value.name)
        formData.append('file',file)
        fetch("http://localhost:8082/office/request/upload",{
            method:'POST',
            body:formData
        }).then((data)=>{
            console.log(data);
        }).then(result => {
            console.log(result);
        })
        officeRequestService.save(Data.value).then((data)=>{
            ElMessage({
                showClose: true,
                message:data,
                type: 'success',
            })
        })
    }
}
//查询负责人
const selectRoleList =()=>{
    officeRequestService.selectRoleById(currentUser.id).then((data)=>{
        approvalList.value=data
    })
}
//发送请示
const postFile= ()=>{
    if(Data.value.approverId==undefined||Data.value.content==''||Data.value.title=='' ||Data.value.name ==''){
        ElMessage({
            message: '请完善信息',
            type: 'warning',
        })
    }
    else {
        Data.value.userId=currentUser.id
        Data.value.classify='请示文件'
        officeRequestService.save(Data.value).then(()=>{
            //空文没有id，根据刚刚生成的稿件命名在后端获取id
            fileData.value.name=Data.value.name
            fileData.value.status='未处理'
            officeRecordService.save(fileData.value).then((data)=>{
                ElMessage({
                    showClose: true,
                    message:data,
                    type: 'success',
                })
            })
        })
    }
}
const upload = ref<UploadInstance>()
const fileList = ref<UploadUserFile[]>([
    
])
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
  console.log(upload.value)
}

const submitUpload = () => {
  upload.value!.submit()
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    file=rawFile
    return true
}
</script>
<template>
    <div style="width: 100vw; height: 100vh;overflow: hidden; overflow-y: auto;">
        <div class="content">
            <div class="content-title">
                <div class="approver">
                    
                </div>
                <div class="approver">
                    <p style="color: red;">*</p><el-icon><User /></el-icon>&nbsp;接收人
                </div>
                <div class="approver">
                    <p style="color: red;">*</p><el-icon><EditPen /></el-icon>&nbsp;命名
                </div>
                <div class="approver">
                    <p style="color: red;">*</p><el-icon><CollectionTag /></el-icon>&nbsp;标题
                </div>
                <div class="content-t">
                    <p style="color: red;">*</p><el-icon><Tickets /></el-icon>&nbsp;内容
                </div>
                <div style="display: flex;align-items: center;justify-content: center;font-size: var(--my-font);height: 80px;">
                    <el-icon><Paperclip /></el-icon>&nbsp;附件
                </div>
            </div>
            <div class="content-main">
                <div class="approver-button">
                </div>
                <div class="approver-button">
                    <el-select
                        v-model="Data.approverId"
                        clearable
                        placeholder="请选择接收人"
                        style="width: 240px"
                    >
                        <el-option
                        v-for="item in approvalList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        />
                    </el-select>
                </div>
                <div class="name-input">
                    <input class="my-input" placeholder="请输入稿件名" v-model="Data.name">
                </div>
                <div class="name-input">
                    <input class="my-input" placeholder="请输入标题" v-model="Data.title">
                </div>
                <div class="content-input">
                    <textarea placeholder="请输内容" v-model="Data.content"></textarea>
                </div>
                <div>
                    <el-upload
                        v-model:file-list="fileList"
                        ref="upload"
                        class="upload-demo"
                        drag
                        action=""
                        :limit="1"
                        :on-exceed="handleExceed"
                        :before-upload="beforeAvatarUpload"
                        :auto-upload="false"
                    >
                    <div>
                        <el-icon :size="30"><upload-filled /></el-icon>
                        <p>点击此处或者拖拽上传</p>
                    </div>
                    </el-upload>
                </div>
            </div>
            
        </div>
        <div style="width: 100%;min-height: 80px;">

        </div>
        <div class="content-bottom">
            <div style="display: flex;align-items: center;gap: 20px;justify-content: center;width: 100%;">
                <div>
                    <el-button
                        type="primary"
                        class="round"
                        @click="postFile"
                    >
                        发送请示
                    </el-button>
                </div>
                <div> 
                    <el-button
                        type="primary"
                        class="round"
                        @click="add('稿件')"
                    >
                        保存稿件
                    </el-button>
                </div>
                <div>
                    <el-button
                        type="primary"
                        class="round"
                        @click="$router.push('/office/history')"
                    >
                        查看历史稿件
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
:root{
    --my-font:16px;
    --approver:50px;
    --my-content:400px;
}
.el-upload-dragger{
    border: none;
    padding: 10px 0 0 0;
}
</style>
<style scoped>

.content{
    background-color: white;
    width: 80vw;
    margin: 2% auto 0;
    min-height: 85vh;
    box-shadow: 0 0 10px 1px rgb(0,0,0,0.1);
    border-radius: 10px;
    display: flex;
    z-index: 1;
}
.content-bottom{
    position: fixed;
    display: flex;
    justify-content: end;
    bottom: 0;
    width: 100vw;
    height: 70px;
    background-color: white;
    box-shadow: 0 0 10px 1px rgb(0,0,0,0.1);
}
@media  screen and (max-height:500px ) {
    .content-bottom{
        visibility: hidden;
    }
}
.content-title{
    width: 20%;
    border-right: 1px solid rgb(0, 0, 0, 0.1);
}
.content-main{
    width: 80%;
}
.approver{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--my-font);
    height: var(--approver);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.approver-button{
    display: flex;
    align-items: center;
    height: var(--approver);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.name-input{
    display: flex;
    align-items: center;
    height: var(--approver);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.my-input{
    border: none;
    outline: none;
    width: 200px;
    height: 30px;
    font-size: var(--my-font);
    transition: 0.5s;
    border-radius: 3px;
    margin-left: 10px;
}
.my-input:focus{
    box-shadow: 0 0 8px 2px rgb(0, 0, 0, 0.1);
    width: 400px;
}
.content-input{
    width: 100%;
    height: var(--my-content);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
.content-input textarea{
    width: calc( 100% - 20px );
    border: none;
    outline: none;
    padding: 10px;
    height: 100%;
    font-size: var(--my-font);
    resize: none;
}
.content-t{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--my-font);
    height: var(--my-content);
    border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}

</style>